<template>
  <div id="rich"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import china from "../map/china.json";
let myRich = null;
let myEchart = null;
onMounted(() => {
  myRich = document.getElementById("rich");
  echarts.registerMap("china", china);
  let data = [
          [116.405285, 39.904989],
          [111.670801, 40.818311],
          [113.280637, 23.125178],
        ]
  myEchart = echarts.init(myRich);
  let option = {
    tooltip: {},
    geo: {
      map: "china",
      width: 600,
      height: 600,
      label: {
        // show: true,
      },
    },
    series: [
      {
        type: "custom",
        coordinateSystem: 'geo',
        renderItem(params, api) {
            let points = data.map(item => api.coord(item))
            return {
                type: 'polygon',
                shape: {
                    points,
                },
                style: api.style(),
                textContent: {
                    type: 'text',
                    style: {
                        text: '这是一个三角形',fill: 'red'
                    }
                },
                textConfig: {
                    position: 'inside'
                }
            }
        },
        data: [0],
      }
    ],
  };
  myEchart.setOption(option);
});
onUnmounted(() => {
  myEchart.dispose(myRich);
});
</script>

<style lang="less" scoped>
#rich {
  width: 800px;
  height: 600px;
}
</style>
